/**
 * useId()
 *
 *    作用：创建一个唯一的Id
 *    语法：
 *      const id = useId()
 *
 *    使用场景：
 *      1. 千万不要使用 useId 来作为 循环时的 key。
 *      2. 给到 label 元素的 htmlFor 去使用的
 *
 *    建议：
 *      1. 如果一个组件内需要用到多个Id，不需要调用 useId 多次，而是使用拼接一个 useId 的方式来玩即可
 */

import { useId } from "react";

function BaseInput({ label }) {
  const id = useId();
  console.log("id", id);

  return (
    <>
      <div>
        <label htmlFor={id}>{label}</label>

        <input id={id} type="text" placeholder="请输入" />
      </div>
      <div>
        <label htmlFor={id + "_1"}>{label}2</label>

        <input id={id + "_1"} type="text" placeholder="请输入" />
      </div>
    </>
  );
}

export default function App() {
  return (
    <div>
      <BaseInput label="用户名" />
      <hr />

      <BaseInput label="用户名" />

      <hr />
      <label>
        <input type="text" />
        <span>hello</span>
      </label>
    </div>
  );
}
